<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<title>Color Admin | General UI Elements</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	
	<!-- ================== BEGIN BASE CSS STYLE ================== -->
	<link href="assets/public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
	<link href="assets/public/css/animate.min.css" rel="stylesheet" />
	<link href="assets/public/css/style.min.css" rel="stylesheet" />
	<link href="assets/public/css/style-responsive.min.css" rel="stylesheet" />
	<link href="assets/public/css/theme/default.css" rel="stylesheet" id="theme" />
	<!-- ================== END BASE CSS STYLE ================== -->
	

</head>
<body>
		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">UI Elements</a></li>
				<li class="active">General</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">General UI Elements <small>header small text goes here...</small></h1>
			<!-- end page-header -->
			
			<!-- begin row -->
			<div class="row">
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="ui-general-1">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Alerts</h4>
                        </div>
                        <div class="panel-body">
							<div class="alert alert-success fade in m-b-15">
								<strong>Success!</strong>
								Vivamus vestibulum posuere est eu tincidunt.
								<span class="close" data-dismiss="alert">&times;</span>
							</div>
							<div class="alert alert-info fade in m-b-15">
								<strong>Info!</strong>
								Morbi sed nibh ac tortor laoreet blandit sed eu ligula.
								<span class="close" data-dismiss="alert">&times;</span>
							</div>
                            <div class="alert alert-warning fade in m-b-15">
								<strong>Warning!</strong>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								<span class="close" data-dismiss="alert">&times;</span>
							</div>
							<div class="alert alert-danger fade in m-b-15">
								<strong>Error!</strong>
								Morbi vitae arcu in neque luctus elementum.
								<span class="close" data-dismiss="alert">&times;</span>
							</div>
                        </div>
                    </div>
                    <!-- end panel -->
			        <!-- begin panel -->
                    <div class="panel panel-inverse" data-sortable-id="ui-general-2">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Notes</h4>
                        </div>
                        <div class="panel-body">
							<div class="note note-success">
								<h4>Some header text here!</h4>
								<p>
								    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                    Maecenas id gravida libero. Etiam semper id sem a ultricies. Donec id consequat magna.
                                    Suspendisse tincidunt blandit metus, eu pretium nibh tincidunt eget.
                                </p>
							</div>
							<div class="note note-info">
								<h4>Some header text here!</h4>
								<p>
								    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                    Maecenas id gravida libero. Etiam semper id sem a ultricies. Donec id consequat magna.
                                    Suspendisse tincidunt blandit metus, eu pretium nibh tincidunt eget.
                                </p>
							</div>
                        </div>
                    </div>
                    <!-- end panel -->
			    </div>
			    <!-- end col-6 -->
			    <!-- begin col-6 -->
			    <div class="col-md-6">
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-general-3">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Labels & Badges</h4>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Class</th>
                                        <th>Labels</th>
                                        <th>Badges</th>
                                        <th>Square Badges</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Default</td>
                                        <td><span class="label label-default">Default</span></td>
                                        <td><span class="badge badge-default">6</span></td>
                                        <td><span class="badge badge-default badge-square">6</span></td>
                                    </tr>
                                    <tr>
                                        <td>Danger</td>
                                        <td><span class="label label-danger">Danger</span></td>
                                        <td><span class="badge badge-danger">4</span></td>
                                        <td><span class="badge badge-danger badge-square">4</span></td>
                                    </tr>
                                    <tr>
                                        <td>Warning</td>
                                        <td><span class="label label-warning">Warning</span></td>
                                        <td><span class="badge badge-warning">7</span></td>
                                        <td><span class="badge badge-warning badge-square">7</span></td>
                                    </tr>
                                    <tr>
                                        <td>Success</td>
                                        <td><span class="label label-success">Success</span></td>
                                        <td><span class="badge badge-success">8</span></td>
                                        <td><span class="badge badge-success badge-square">8</span></td>
                                    </tr>
                                    <tr>
                                        <td>Info</td>
                                        <td><span class="label label-info">Info</span></td>
                                        <td><span class="badge badge-info">2</span></td>
                                        <td><span class="badge badge-info badge-square">2</span></td>
                                    </tr>
                                    <tr>
                                        <td>Primary</td>
                                        <td><span class="label label-primary">Primary</span></td>
                                        <td><span class="badge badge-primary">5</span></td>
                                        <td><span class="badge badge-primary badge-square">5</span></td>
                                    </tr>
                                    <tr>
                                        <td>Inverse</td>
                                        <td><span class="label label-inverse">Inverse</span></td>
                                        <td><span class="badge badge-inverse">12</span></td>
                                        <td><span class="badge badge-inverse badge-square">12</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- end panel -->
			        <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-general-4">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Pagination & Pager</h4>
                        </div>
                        <div class="panel-body">
                            <h5 class="m-t-0 m-b-15">Pagination</h5>
                            <div>
                                <ul class="pagination pagination-lg m-t-0 m-b-10">
                                    <li class="disabled"><a href="javascript:;">«</a></li>
                                    <li class="active"><a href="javascript:;">1</a></li>
                                    <li><a href="javascript:;">2</a></li>
                                    <li><a href="javascript:;">3</a></li>
                                    <li><a href="javascript:;">4</a></li>
                                    <li><a href="javascript:;">5</a></li>
                                    <li><a href="javascript:;">»</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul class="pagination m-t-0 m-b-10">
                                    <li class="disabled"><a href="javascript:;">«</a></li>
                                    <li class="active"><a href="javascript:;">1</a></li>
                                    <li><a href="javascript:;">2</a></li>
                                    <li><a href="javascript:;">3</a></li>
                                    <li><a href="javascript:;">4</a></li>
                                    <li><a href="javascript:;">5</a></li>
                                    <li><a href="javascript:;">»</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul class="pagination pagination-sm m-t-0 m-b-10">
                                    <li class="disabled"><a href="javascript:;">«</a></li>
                                    <li class="active"><a href="javascript:;">1</a></li>
                                    <li><a href="javascript:;">2</a></li>
                                    <li><a href="javascript:;">3</a></li>
                                    <li><a href="javascript:;">4</a></li>
                                    <li><a href="javascript:;">5</a></li>
                                    <li><a href="javascript:;">»</a></li>
                                </ul>
                            </div>
                            <h5>Pager (Default & Aligned links)</h5>
                            <ul class="pager">
                                <li><a href="javascript:;">Previous</a></li>
                                <li><a href="javascript:;">Next</a></li>
                            </ul>
                            <ul class="pager">
                                <li class="previous disabled"><a href="javascript:;">&larr; Older</a></li>
                                <li class="next"><a href="javascript:;">Newer &rarr;</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- end panel -->
			    </div>
			    <!-- end col-6 -->
			</div>
			<!-- end row -->
			<!-- begin row -->
			<div class="row">
			    <!-- begin col-12 -->
			    <div class="col-md-12">
                    <!-- begin panel -->
			        <div class="panel panel-inverse" data-sortable-id="ui-general-5">
                        <div class="panel-heading">
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                            <h4 class="panel-title">Progress bar</h4>
                        </div>
                        <div class="panel-body">
							<div class="alert alert-info m-b-0">
								<h4 class="block">Cross-browser compatibility</h4>
								<p>
									 Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
								</p>
							</div>
							<div class="row">
							    <div class="col-md-3">
                                    <h4>Basic</h4>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 80%">Default</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 70%">Success</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-info" style="width: 60%">Info</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-warning" style="width: 50%">Warning</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-danger" style="width: 40%">Danger</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-inverse" style="width: 30%">Inverse</div>
                                    </div>
                                </div>
							    <div class="col-md-3">
                                    <h4>Striped</h4>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar" style="width: 80%">Default</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" style="width: 70%">Success</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" style="width: 60%">Info</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" style="width: 50%">Warning</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" style="width: 40%">Danger</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-inverse" style="width: 30%">Inverse</div>
                                    </div>
							    </div>
							    <div class="col-md-3">
                                    <h4>Animated</h4>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar" style="width: 80%">Default</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" style="width: 70%">Success</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-info" style="width: 60%">Info</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-warning" style="width: 50%">Warning</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-danger" style="width: 40%">Danger</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-inverse" style="width: 30%">Inverse</div>
                                    </div>
							    </div>
							    <div class="col-md-3">
                                    <h4>Stacked</h4>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-info" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-success" style="width: 25%">25</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-info" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-success" style="width: 25%">25</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-primary" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-info" style="width: 25%">25%</div>
                                        <div class="progress-bar progress-bar-success" style="width: 25%">25</div>
                                    </div>
							    </div>
							</div>
						</div>
					</div>
					<!-- end panel -->
			    </div>
			    <!-- end col-12 -->
			</div>
			<!-- end row -->
		</div>
		<!-- end #content -->

		<!-- begin scroll to top btn -->
		<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	
	<!-- ================== BEGIN BASE JS ================== -->
	<script src="assets/public/plugins/jquery/jquery-1.9.1.min.js"></script>
	<script src="assets/public/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
	<script src="assets/public/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
	<script src="assets/public/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--[if lt IE 9]>
		<script src="assets/public/crossbrowserjs/html5shiv.js"></script>
		<script src="assets/public/crossbrowserjs/respond.min.js"></script>
		<script src="assets/public/crossbrowserjs/excanvas.min.js"></script>
	<![endif]-->
	<script src="assets/public/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/public/plugins/jquery-cookie/jquery.cookie.js"></script>
	<!-- ================== END BASE JS ================== -->
	
	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="assets/public/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->
	
	<script>
		$(document).ready(function() {
			App.init();
		});
	</script>
 
</body>
</html>
